<template>
  <div>
    <div style="background-color:#468aff">
      <ret-head></ret-head>
    </div>
    <div style="margin-top: 30px;background: white; box-shadow:1px 2px 3px 4px rgba(204,204,204,0.38)" class="main">
      <p style="font-family: 黑体;font-size: 25px;margin-left: 155px">&nbsp;找回密码</p>
      <p style="margin-left: 70px;margin-top: 25px;font-family: 新宋体;">邮箱验证码</p>
      <p style="margin-left: 70px;font-family: 新宋体;font-style: normal;">请填写完整的邮箱<span style="color: #ffd821">{{emailSplit}}*****</span>以验证身份</p>
      <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"
               label-position="right" style="margin-top: 10px">
        <el-form-item label="邮箱" prop="email1" style="width: 365px">
          <el-input v-model="ruleForm.email1" placeholder="请输入邮箱"></el-input>
        </el-form-item>

        <div style="border: solid 0px rgba(49,63,77,0.43)">
        <el-form-item label="验证码" prop="code" style="width: 410px">
          <div style="width: 150px;float: left">
          <el-input v-model="ruleForm.code" placeholder="请输入验证码"></el-input>
          </div>
          <div style="width: 70px;float: left;margin-left: 12px">
          <el-button type="text" :disabled="!show" @click="verifyEmail('ruleForm')">发送验证码</el-button>
          </div>
          <div style="width: 30px;float: left;margin-left: 13px">
          <span v-show="!show" class="count">({{count}}s)</span>
          </div>
        </el-form-item>
        </div>
        <el-form-item style="margin-right:100px;margin-top: 30px">
          <el-button type="primary" @click="next" style="width: 250px">下一步</el-button>
        </el-form-item>
      </el-form>
    </div>

    <div style="margin-left: 18%;margin-top: 200px">
      <el-steps :space="300" :active="1" finish-status="success" align-center>
        <el-step title="已完成 步骤1" ></el-step>
        <el-step title="进行中 步骤2"  status="finish"></el-step>
        <el-step title=" 步骤 3"></el-step>
      </el-steps>
    </div>
  </div>
</template>

<script>
  import RetHead from "./RetHead";

  export default {
    name: "Step2",

    components: {
      RetHead: RetHead

    },



  data() {
      return {
        ver:'',
        id:this.$route.query.id,
        show: true, // 初始启用按钮
        count: '', // 初始化次数
        timer: null,
        email: window.sessionStorage.getItem('email'),
        emailSplit:window.sessionStorage.getItem("emailSplit"),
       //更改倒计时时间
        ruleForm:
          {
            email1: '',
            code: '',
          },
        rules: {
          email1: [
            {required: true, message: '请输入邮箱', trigger: 'blur'},
          ],
          code: [
             {required: true, message: '请输入验证码', trigger: 'blur'},
          ],
        }
      }
    },
    methods: {
      verifyEmail() {
        if (this.ruleForm.email1===this.email){
        this.$refs['ruleForm'].validateField("email1",
          async emailError => {
            if (!emailError) {
              /*const {data: res} =*/
              await this.$http.post
              ('http://localhost:8888/getEmailVerify',
                {userEmail: this.ruleForm.email1},
                {emulateJSON: true}).then(res =>
              {
                  this.ver = res.data;
                 /* alert(this.ver)*/
                  this.$message({message:"验证码已发送，请及时查收！",
                  type:"success"});
                if (!this.timer)
                {
                  const TIME_COUNT = 60;
                this.count = TIME_COUNT;
                this.show = false;
                this.timer = setInterval(() => {
                  if (this.count > 0 && this.count <= TIME_COUNT) {
                    this.count--;
                  } else {
                    this.show = true;
                    clearInterval(this.timer); // 清除定时器
                    this.timer = null;
                  }
                }, 1000)}

                })
            } else {
              return false
            }
          });}
        else
        {
          this.$message({
            message: "邮箱输入不正确",
            type: "error"
          });
        }
      },

      next() {
        this.$refs['ruleForm'].validate(async (valid) => {
          if (valid) {
            if (this.ver==this.ruleForm.code) {

              this.$router.push({path: '/Step3',query: {id: this.id}});
            } else {
              this.$message({message: "验证码输入不正确！", type: "error"})
            }
          } else {
            return false
          }
        })
      }
    }

  }
</script>

<style scoped>
  .main {
    /*text-align: center;*/
    background-color: rgba(255, 255, 255, 0.07);
    /*border-radius: 20px;*/
    width: 450px;
    height: 350px;
    position: relative;
    left: 50%;
    top: 10%;
    transform: translate(-50%, 10%);
  }

</style>
